// 接口的基础地址
const baseUrl = 'http://phpclub.org.cn:8080/api';
// 使用全局变量保存用户的信息  初始值null 表示没有登录
let userInfo = null;
// 处理显示用户的登录状态
if($.cookie){
    // 配置json的操作为对象格式
    $.cookie.json = true;
    // 获取到cookie信息
    userInfo = $.cookie('userInfo');
    // console.log($.cookie('userInfo'));
}
/************二级菜单****************/
var lis =document.querySelectorAll('.first-menu li');
var secmenubox =document.getElementsByClassName('sec-menu-box');
var secmenu=document.querySelector('.sec-menu');
var firmenu=document.querySelector('.first-menu');
var nav=document.querySelector('.nav');
/****************二级菜单默认事件********************/ 
//遍历节点添加事件
for(let i=0;i<lis.length;i++){
    lis[i].index=i;
    lis[i].addEventListener('mouseover',function(){
       secmenu.className="sec-menu";
       for(let j=0;j<secmenubox.length;j++){
          lis[j].className="";
          secmenubox[j].style.display='none';
       }
       this.className="bgc";
       // secmenubox[this.index].style.top+=34*i+'px';
       secmenubox[this.index].style.display='block';
    })
 }
 firmenu.addEventListener('mouseout',function(){
    secmenu.className='sec-menu hide'
 })
 nav.addEventListener('mouseout',function(){
    secmenu.className='sec-menu hide'
 })
 secmenu.addEventListener('mouseover',function(){
    this.className='sec-menu'
 })
// 处理公共的特效
$(function(){
    $.get(baseUrl+'/system/category',{},(res)=>{
        console.log(res);
        let html1 = '';
        let html2 = '';
        //遍历data 
        res.data.forEach((item,index) => {
        //一级分类数据拼接
            if(index<10){
                if(index==0){
                    html1+='<ul>';
                    html1+='<li class="bgc">';
                    html1+='<span><a href="list.html?id='+item.id+'">'+item.cateName+'</span>';
                    html1+='</li>'
                }else if(index==9){
                    html1+='<li class="">';
                    html1+='<span><a href="list.html?id='+item.id+'">'+item.cateName+'</span>';
                    html1+='</li>'
                    html1+='</ul>'
                }else{
                    html1+='<li class="">';
                    html1+='<span><a href="list.html?id='+item.id+'">'+item.cateName+'</span>';
                    html1+='</li>'
                }  
            }
        });
        res.data.forEach((item,index) => {
            //二级分类数据拼接 
            if(item.children){
            item.children.forEach((item2,index2)=>{
                html2+=`<div class="sec-menu-box">
                <div class="sec-menu-box-title">
                <a href="list.html?id=${item2.id}">${item2.cateName}</a>
                </div>
                <div class="sec-menu-box-con">
                    <ul><li>精选··· ></li></ul>
                    <ul>
                `
                if(item2.children){
                    item2.children.forEach((item3)=>{
                        html2 +='<li><a href="">'+item3.cateName+'</a></li>'
                })
                    html2+='</ul>'    
                    html2+='</div>'
 
                }
            html2+='</div>'
            });
        } 
        });
        console.log(html2);
        $('.first-menu').html(html1);
        $('.sec-menu hide').html(html2);




        /************二级菜单****************/
var lis =document.querySelectorAll('.first-menu li');
var secmenubox =document.getElementsByClassName('sec-menu-box');
var secmenu=document.querySelector('.sec-menu');
var firmenu=document.querySelector('.first-menu');
var nav=document.querySelector('.nav');

/****************二级菜单默认事件********************/ 
//遍历节点添加事件
for(let i=0;i<lis.length;i++){
   lis[i].index=i;
   lis[i].addEventListener('mouseover',function(){
      secmenu.className="sec-menu";
      for(let j=0;j<secmenubox.length;j++){
         lis[j].className="";
         secmenubox[j].style.display='none';
      }
      this.className="bgc";
      // secmenubox[this.index].style.top+=34*i+'px';
      secmenubox[this.index].style.display='block';
   })
}
firmenu.addEventListener('mouseout',function(){
   secmenu.className='sec-menu hide'
})
nav.addEventListener('mouseout',function(){
   secmenu.className='sec-menu hide'
})
secmenu.addEventListener('mouseover',function(){
   this.className='sec-menu'
})
    },'json')
    // console.log(userInfo);
    if(userInfo){
        // 已经登录
        $('#login').html(userInfo.nickname+'，您好！');
        // console.log(userInfo.nickname);
        //下拉效果
        $('.head-con .login').on('mouseenter',function(){
            $(this).children('ul').stop(true,false).slideDown(100);
        }).on('mouseleave',function(){
            $(this).children('ul').stop(true,false).slideUp(100);
        })
        //点击购物车图标成功跳转
        $('.buy') .on('click',function(){
            location.assign('购物车.html')
        }) 
    }else{
        // 没有登录
        $('#login').html('<a href="#" id="login">登录</a><a href="#" id="register">注册</a>');
        //点击购物车图标失败跳转
        $('.buy') .on('click',function(){
            location.assign('cart.html')
        }) 
    }
    // 实现退出
    $('#logout').on('click',()=>{
        // 删除cookie 
        $.removeCookie('userInfo');
        // 重新载入当前页面
        location.reload();
    })
})
/****************下拉菜单效果*************************/
$('.head-con .agreement').on('mouseenter',function(){
    $(this).children('ul').stop().slideDown(100);
}).on('mouseleave',function(){
    $(this).children('ul').stop().slideUp(100);
})  
